<template>
  <el-container class="home-container">
      <el-header><!-- 头部区 -->
          <div>
              <!-- <div class="toggle-button">|||</div> -->
              <el-button icon="el-icon-s-unfold" @click="toggleCollapse()"></el-button>
              <!-- <img src="../assets/nav.png" alt="" height="50px"/> -->
              <span>论文推荐系统</span>
          </div>
          <!-- <el-button type="info" @click="logout">退出</el-button> -->
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
          <!-- 侧边栏 -->
          <el-aside :width="isCollapse ? '0px' : '200px'">
            <el-menu
              background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
              :collapse="isCollapse" :collapse-transition="false">
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <router-link to="/">学术知识图谱</router-link>
                <!-- <span slot="title">学术知识图谱</span> -->
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <router-link to="/recommendation">学术论文推荐</router-link>
                <!-- <span slot="title">学术论文推荐</span> -->
              </el-menu-item>
            </el-menu>
          </el-aside>
          <!-- 右侧内容主体 -->
          <el-main>
          <router-view></router-view>
          </el-main>
      </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  },

  methods: {
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
      // console.log(this.isCollapse)
    }
  }
}
</script>

<style lang="scss">  // 加了scoped后scss只作用于当前组件中的元素
.home-container{
  position: fixed;
  // height: 683px;
  height: 100%;
  width: 100%;
}
.el-header{
   background-color: #373d41;
   display: flex; //设置显示为flex布局
   justify-content: space-between;//设置为flex左右布局
   padding-left: 0;//左内边距为0（Logo贴左边）
   align-items: center;//元素上下居中（防止右边按钮贴上下边）
   color: #fff;
   font-size: 20px;
   > div {//内嵌的div样式
       display: flex;
       align-items: center;  // Logo和文字上下居中
       .el-button {
        background-color: transparent;
        border: none;
        font-size: 25px; // 设置图标大小
        color: #fff;
       }
       span {
           margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
       }
   }
}
.el-aside{
   background-color: #333744;
   .el-menu-item {
    a {
      // font-weight: bold;
      color: #ffffff;
      text-decoration: none;
      &.router-link-exact-active {
        color: #409BFF;
        text-decoration: none;
      }
   }
  }

}

</style>
